<template>
    <PrimePageLayout>
      <template #body>
        <horizontal-animation :position="horizontalPosition">
          <pageRender :key="activePage"/>
        </horizontal-animation>
      </template>
      <template #footer>
        <van-tabbar :model-value="activePage" @update:modelValue="activePageChange" :fixed="false">
          <van-tabbar-item v-for="bar in bars" :name="bar.name" :icon="bar.icon">
            {{ bar.title }}
          </van-tabbar-item>
        </van-tabbar>
      </template>
    </PrimePageLayout>
</template>
<script lang="ts" setup>
import {h, nextTick, shallowRef} from "vue";
import {real} from "@/utils";
import MePage from '@hhd/HomeComponents/MePage/index.vue'
import TodoPage from '@hhd/HomeComponents/TodoPage/index.vue'
import DonePage from '@hhd/HomeComponents/DonePage/index.vue'
import PrimePageLayout from "@hhd/HomeComponents/PrimePageLayout.vue";

const bars = [
  // {name: 'todo', icon: 'home-o', title: '待办'},
  {name: 'todo', icon: 'daiban', title: '待办'},
  {name: 'done', icon: 'yiban', title: '已办'},
  {name: 'me', icon: 'friends-o', title: '我的'}
];
const activePage = shallowRef('todo');
const pageRender = () => {
  if (activePage.value === 'me') return h(MePage)
  if (activePage.value === 'todo') return h(TodoPage)
  if (activePage.value === 'done') return h(DonePage)
}
const horizontalPosition = shallowRef('left');

const active = shallowRef();

function tabChange(active: string) {
  console.log(active);
}

function activePageChange(val: string) {
  horizontalPosition.value = 'left'
  if (bars.findIndex(b => b.name === real(activePage))
      > bars.findIndex(b => b.name === val)) {
    horizontalPosition.value = 'right'
  }
  nextTick(() => {
    activePage.value = val;
  });
}


</script>